<template>
  <div class="detail-header">
    <div class="placeholder" :style="{'height':statusBarHeight+'px'}" />
    <div class="content">
      <div class="icon" @click="clickHandle">
        <svg-icon icon-class="xiangzuo" />
      </div>
      <MoreClose black />
    </div>
  </div>
</template>
<script>
import MoreClose from '@/components/MoreClose'
import { mapGetters } from 'vuex'
export default {
  name: 'DetailHeader',
  components: {
    MoreClose
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['statusBarHeight'])
  },
  created() {

  },
  methods: {
    clickHandle() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.detail-header{
  position: absolute;
  width: 100%;
  .placeholder{
    height: 20PX;
  }
  .content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12PX;
    height: 44PX;
    box-sizing: border-box;
    position: absolute;
    z-index: 999;
    .icon{
      height: 30PX;
      width: 30PX;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(3,3,3,0.3);
      .svg-icon{
        font-size:24PX;
        color: #fff;
      }
    }
  }
}
</style>
